import React from 'react';
import { Layout, Menu } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
  HomeOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  TeamOutlined,
  ShoppingOutlined,
} from '@ant-design/icons';
import { useUserStore } from '../store/user';
import styles from './MainLayout.module.css';

const { Sider, Content } = Layout;

const MainLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const isAdmin = useUserStore((state) => state.isAdmin);
  const userName = useUserStore((state) => state.userName);

  // 普通用户菜单
  const userMenuItems = [
    {
      key: '/home',
      icon: <HomeOutlined />,
      label: '首页',
    },
    {
      key: '/profile',
      icon: <UserOutlined />,
      label: '个人资料',
    },
    {
      key: '/orders',
      icon: <ShoppingCartOutlined />,
      label: '我的订单',
    },
  ];

  // 管理员菜单
  const adminMenuItems = [
    ...userMenuItems,
    {
      key: '/user-manage',
      icon: <TeamOutlined />,
      label: '用户管理',
    },
    {
      key: '/product-manage',
      icon: <ShoppingOutlined />,
      label: '商品管理',
    },
  ];

  const menuItems = isAdmin ? adminMenuItems : userMenuItems;

  return (
    <Layout className={styles.layout}>
      <Sider width={200} className={styles.sider}>
        <div className={styles.userInfo}>
          <UserOutlined /> {userName}
          {isAdmin && <span className={styles.adminTag}>管理员</span>}
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          style={{ height: '100%', borderRight: 0 }}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
        />
      </Sider>
      <Layout className={styles.contentLayout}>
        <Content className={styles.content}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout; 